<script lang="ts" setup>
import indexText from "./index.json"
import {onMounted, reactive, ref, watch} from "vue";
import {requestGetSoundSource, requestNewSongExpressDelivery} from "../../../utils/axiosURL"
import {storeToRefs} from "pinia";
import useSongURLStore from "../../../store/songURL";

const { songName, playStates } = storeToRefs(useSongURLStore())
const songURLStore = useSongURLStore()

// 分类下标
let cateIndex = ref<number>(0)
// 请求code
let requestCode = ref<string>('0')
// 新歌速递数据
let NewSongExpressDeliveryData = ref<any>([])

const changeIndexCodeFn = (index: number, code: string) => {
  cateIndex.value = index
  requestCode.value = code
}

const requestNewSongExpressDeliveryFn = () => {
  requestNewSongExpressDelivery(requestCode.value).then(({data}: any) => {
    NewSongExpressDeliveryData.value = data
    // localStorage.setItem("playList", JSON.stringify(data))
    // songURLStore.initPlayList(data)
  }).catch(err => {
    console.log(err)
  })
}

// 双击击歌曲播放事件函数
const clickSongPlay = (id: number, name: string, singer: string, picUrl: string, duration: number, index: number) => {
  localStorage.setItem("playState", "false")
  songURLStore.playStateChange(false)
  requestGetSoundSource(id).then(({ data }: any) => {
    songURLStore.init(data[0].url, name, singer, picUrl, duration, index, id)
    localStorage.setItem('songInfomation', JSON.stringify(
      {
        songName: name,
        songUrl: data[0].url,
        singer: singer,
        picUrl: picUrl,
        duration: duration,
        index,
        id
      }
    ))
  }).catch((err: any) => {
    console.log(err);
  })
}

onMounted(() => {
  requestNewSongExpressDeliveryFn()
})

watch(requestCode, () => {
  requestNewSongExpressDeliveryFn()
})

</script>

<template>
<div class="newSongWrap">
  <div class="topCate">
    <div class="leftCate">
      <ul>
        <li
          v-for="(item, index) in indexText.cateArr"
          :class="cateIndex === index ? 'active' : ''"
          @click="() => changeIndexCodeFn(index, item.code)"
        >{{ item.name }}</li>
      </ul>
    </div>
    <div class="rightWrap">
      <div class="playAll">
        <span class="iconfont icon-yunhang"></span>
        <span>{{ indexText.playAll }}</span>
      </div>
      <div class="collectAll">
        <span class="iconfont icon-24gl-folderPlus"></span>
        <span>{{ indexText.collectAll }}</span>
      </div>
    </div>
  </div>
  <div class="newSongWrap">
    <div class="newSongItem"
         v-if="NewSongExpressDeliveryData.length"
         v-for="(item, index) in NewSongExpressDeliveryData"
         @dblclick="clickSongPlay(item.id, item.name, item.album.name, item.album.picUrl, item.duration, index)"
    >
      <p  v-if="item.name !== songName" class="index">{{ index + 1 < 10 ? `0${index + 1}` : index + 1 }}</p>
      <span v-else>
        <span v-if="playStates" class="iconfont icon-24gf-volumeZero"></span>
        <span v-else class="iconfont icon-24gf-volumeMiddle"></span>
      </span>
      <div class="imgAndName">
        <img :src="item.album.picUrl" alt="">
        <p class="songName" :class="songName === item.name ? 'active' : ''">{{ item.name }}</p>
      </div>
      <div class="singerName">{{ item.artists[0].name }}</div>
      <div class="album">{{ item.album.name }}</div>
      <div class="time">
        <SongTime :songDuration=item.duration />
      </div>
    </div>
    <AlibumListSkeleton v-else v-for="item in 10" />
  </div>
</div>
</template>

<style lang="scss" scoped>
.newSongWrap {
  width: 100%;

  .topCate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 40px;
    padding-right: 30px;
    box-sizing: border-box;

    .leftCate {
      ul {
        display: flex;

        li {
          margin-right: 20px;
          font-size: $font-size-sm;
          color: $font_second_color;
          font-family: $textFont;
        }

        .active {
          font-size: 15px;
          font-family: $activeTextFont;
          color: #000;
        }
      }
    }

    .rightWrap {
      display: flex;
      justify-content: end;

      .playAll {
        font-size: $font-size-sm;
        @include color('color');
        font-family: $textFont;
        border-radius: 25px;
        padding: 3px 15px 1px;
        @include background_color('bk_color');
        cursor: pointer;

        .icon-yunhang {
          vertical-align: -2px;
          margin-right: 4px;
        }
      }

      .collectAll {
        font-size: $font-size-sm;
        color: $font_main_color;
        font-family: $textFont;
        border-radius: 25px;
        border: 1px solid $lineColor;
        padding: 3px 15px 1px;
        margin-left: 20px;
        cursor: pointer;

        .icon-24gl-folderPlus {
          vertical-align: -2px;
          margin-right: 4px;
        }

        &:hover {
          background-color: rgb(242,242,242);
        }
      }
    }
  }

  .newSongWrap {
    width: 100%;
    padding-right: 12px;
    box-sizing: border-box;

    .newSongItem {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 80px;
      padding-left: 8px;
      box-sizing: border-box;
      border-radius: 8px;

      .index {
        color: $font_second_color;
        font-family: $textFont;
        font-size: $font-size-sm;
      }

      .imgAndName {
        display: flex;
        align-items: center;
        width: 45%;
        height: 100%;

        img {
          width: 60px;
          height: 60px;
          border-radius: 6px;
        }

        .songName {
          margin-left: 6px;
          color: $font_second_color;
          font-family: $textFont;
          font-size: $font-size-sm;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .active {
          color: $font_red_color;
        }
      }

      .singerName {
        width: 15%;
        color: $font_second_color;
        font-family: $textFont;
        font-size: $font-size-sm;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .album {
        width: 15%;
        color: $font_second_color;
        font-family: $textFont;
        font-size: $font-size-sm;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .time {
        width: 10%;
        color: $font_second_color;
        font-family: $textFont;
        font-size: $font-size-sm;
      }

      .icon-24gf-volumeZero,
      .icon-24gf-volumeMiddle {
        color: $font_red_color;
      }

      &:nth-child(odd) {
        background-color: rgb(250,250,250);
      }
      &:hover {
        background-color: rgb(241,242,243);
      }
    }
  }
}
</style>
